<template>
    <div class="settings-page">
        <div class="container page">
            <div class="row">
                <div class="col-md-6 offset-md-3 col-xs-12">
                    <h1 class="text-xs-center">Your Settings</h1>

                    <form @submit.prevent="onSubmit">
                        <fieldset>
                            <fieldset class="form-group">
                                <input v-model="currentUser.image" class="form-control" type="text"
                                       placeholder="URL of profile picture" />
                            </fieldset>
                            <fieldset class="form-group">
                                <input v-model="currentUser.username" required class="form-control form-control-lg"
                                       type="text" placeholder="Your Name" />
                            </fieldset>
                            <fieldset class="form-group">
                                <textarea v-model="currentUser.bio" required class="form-control form-control-lg"
                                          rows="8" placeholder="Short bio about you"></textarea>
                            </fieldset>
                            <fieldset class="form-group">
                                <input v-model="currentUser.email" required class="form-control form-control-lg"
                                       type="text" placeholder="Email" />
                            </fieldset>
                            <fieldset class="form-group">
                                <input v-model="currentUser.password" required minlength="8"
                                       class="form-control form-control-lg" type="password" placeholder="Password" />
                            </fieldset>
                            <button class="btn btn-lg btn-primary pull-xs-right" @click="onSubmit">
                                Update Settings
                            </button>
                        </fieldset>
                    </form>
                    <hr />
                    <button class="btn btn-outline-danger" @click="logout">
                        Or click here to logout.
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { updateUser } from '@/api/user'
import { mapState, mapMutations } from 'vuex'

const Cookie = process.client ? require("js-cookie") : undefined;
export default {
    name: 'Settings',
    middleware: ['authenticated'],
    data() {
        return {
            currentUser: {
                email: '',
                image: '',
                username: '',
                bio: '',
                password: ''
            }
        }
    },
    computed: {
        ...mapState(['user'])
    },
    mounted() {
        Object.assign(this.currentUser, this.user)
    },
    methods: {
        ...mapMutations(['setUser']),
        async onSubmit() {
            try {
                await updateUser(this.currentUser)
                this.setUser(this.currentUser)

                this.$router.push({
                    name: 'profile',
                    params: { username: this.user.username }
                })
            } catch (error) {}
        },
        logout() {
            // 删除Cookie中用户登录状态
            Cookie.remove('user')
            // 删除容器中用户登录状态
            this.$store.commit('setUser', null)
            // 回到首页
            this.$router.push('/')
        }
    }
}
</script>

<style></style>
